<template>
  <scroll-view
    class="position-collection"
    scroll-y
    style="height: 100vh;"
  >
    <!-- 职位列表 -->
    <view 
      class="position-item"
      v-for="(position, index) in collectedPositions"
      :key="index"
    >
      <!-- 职位卡片与删除按钮的容器 -->
      <view class="position-container" 
        @touchstart="start($event, index)"
        @touchmove="move($event, index)"
        @touchend="end(index)"
        :style="{transform: `translateX(${position.moveX}px)`}"
      >
        <!-- 职位卡片 -->
        <view class="position-card">
          <!-- 职位名称与薪资 -->
          <view class="position-card__header">
            <text class="position-card__title">{{ position.positionName }}</text>
            <text class="position-card__salary">{{ position.salary }}</text>
          </view>

          <!-- 公司名称 -->
          <text class="position-card__company">{{ position.companyName }}</text>

          <!-- HR信息与沟通按钮 -->
          <view class="position-card__footer">
              <view class="position-card__hr">
                <image :src="position.hrAvatarUrl" class="position-card__hr-avatar"></image>
                <text class="position-card__hr-name">{{ position.respPerson }} · {{ position.respPos }}</text>
              </view>
			  <text class="contact-city">{{ position.city }}</text>
            </view>
        </view>
        
        <!-- 删除按钮 -->
        <view class="btn_del" @click="del(index)">
          删除
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="collectedPositions.length === 0" class="empty-state">
      <image src="/static/l.png" class="empty-state__img"></image>
      <text class="empty-state__text">暂无浏览记录</text>
      <button class="empty-state__btn">去浏览职位</button>
    </view>
	
	<!-- 加载完成提示 -->
	<view class="load-complete" v-if="!hasMore">已加载全部</view>
  </scroll-view>
</template>

<script>
import { getHistoryJob, deleteJobHistory } from "@/api/job.js";
export default {
  data() {
    return {
      delBtnWidth: 80,  // 删除按钮宽度
      collectedPositions: [],
      pageNum: 1,
      pageSize: 10,
      isLoading: false,
      hasMore: true
    };
  },
  methods: {
    // 获取历史职位
    async getJobHistory() {
      if (this.isLoading || !this.hasMore) return;
      
      this.isLoading = true;
      try {
        const res = await getHistoryJob(this.pageNum, this.pageSize);
        if (res.code === 200 && res.data && res.data.list) {
          const newPositions = res.data.list;
          
          // 为新数据添加滑动相关属性
          newPositions.forEach(pos => {
            pos.moveX = 0;
            pos.startX = 0;
            pos.isMoving = false;
          });
          
          // 合并数据
          if (this.pageNum === 1) {
            this.collectedPositions = newPositions;
          } else {
            this.collectedPositions = [...this.collectedPositions, ...newPositions];
          }
          
          // 判断是否还有更多数据
          this.hasMore = newPositions.length >= this.pageSize;
          this.pageNum++;
        } else {
          console.error('获取历史职位失败:', res.message);
        }
      } catch (error) {
        console.error('获取历史职位错误:', error);
      } finally {
        this.isLoading = false;
      }
    },
    
    // 删除历史记录
    async del(index) {
      const position = this.collectedPositions[index];
      
      // 先关闭滑动
      this.collectedPositions[index].moveX = 0;
      
      // 确认删除
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条浏览记录吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await (position.id);
              if (result.code === 200) {
                // 从本地数组中删除
                this.collectedPositions.splice(index, 1);
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });
              } else {
                uni.showToast({
                  title: '删除失败',
                  icon: 'none'
                });
              }
            } catch (error) {
              console.error('删除历史记录错误:', error);
              uni.showToast({
                title: '网络错误，请重试',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    // 以下为原有滑动逻辑，保持不变
    start(e, index) {
      this.collectedPositions[index].startX = e.touches[0].clientX;
      this.collectedPositions[index].isMoving = true;
      // 关闭其他已打开的删除按钮
      this.collectedPositions.forEach((item, i) => {
        if (i !== index && item.moveX < 0) {
          item.moveX = 0;
        }
      });
    },
    move(e, index) {
      if (!this.collectedPositions[index].isMoving) return;
      const currentX = e.touches[0].clientX;
      const diffX = currentX - this.collectedPositions[index].startX;
      // 限制移动范围
      this.collectedPositions[index].moveX = Math.max(
        Math.min(diffX, 0), 
        -this.delBtnWidth
      );
    },
    end(index) {
      this.collectedPositions[index].isMoving = false;
      // 判断是否显示删除按钮
      if (this.collectedPositions[index].moveX <= -this.delBtnWidth / 2) {
        this.collectedPositions[index].moveX = -this.delBtnWidth;
      } else {
        this.collectedPositions[index].moveX = 0;
      }
    }
  },
  mounted() {
    this.getJobHistory();  // 初始加载
  }
};
</script>


<style scoped>
/* 页面容器基础样式 */
.position-collection {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20rpx;
}

/* 单个职位项容器 */
.position-item {
  margin-bottom: 15rpx;
  overflow: hidden;
  border-radius: 12rpx;
  padding: 0 15rpx;
}

/* 职位容器（卡片+删除按钮的父容器） */
.position-container {
  display: flex;
  width: calc(102% + 80px);
  transition: transform 0.3s ease;
  position: relative;
}

/* 职位卡片样式 */
.position-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  width: 81%;
}

/* 删除按钮样式 */
.btn_del {
  width: 80px;
  background: #ff3b30;
  color: #fff;
  font-size: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

/* 以下为原有样式 */
.position-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20rpx;
}

.position-card__title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.position-card__salary {
  font-size: 30rpx;
  color: #ff6700;
}

.position-card__company {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 25rpx;
}

.position-card__tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 25rpx;
  margin-top: 25rpx; 
}

.position-card__tag {
  background-color: #f5f5f5;
  color: #999;
  font-size: 24rpx;
  padding: 8rpx 15rpx;
  border-radius: 6rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.position-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.action-buttons {
  display: flex;
  gap: 15rpx;
  margin-left: 15rpx;
}

.position-card__hr {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.position-card__hr-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.position-card__hr-name {
  font-size: 24rpx;
  color: #666;
}

.delete-btn {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background-color: #ff4d4f;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
}

.detail-btn {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background-color: #b6ccd8;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 200rpx;
}

.empty-state__img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-state__text {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 40rpx;
}

.empty-state__btn {
  background-color: #00b42a;
  color: #ffffff;
  border-radius: 40rpx;
  padding: 15rpx 60rpx;
  font-size: 28rpx;
}

.contact-city {
  margin-left: auto;  /* 补充城市文本的右对齐样式 */
  font-size: 26rpx;
  color: #666;
}
</style>